import React, { Component } from 'react'
import { connect } from 'react-redux'
import { BREADJUDGE, BLOGCHANGE, BLOGVALUECHANGE } from '@/store/actionType'
// 编辑器即样式
import MdEditor from 'react-markdown-editor-lite'
import 'react-markdown-editor-lite/lib/index.css'
// 解析器
// import MarkdownIt from 'markdown-it'
import * as ReactMarkdown from 'react-markdown'
import JudgeLogin from '@/components/Hoc/judge'
// 注册插件(若有需求)
// MdEditor.use(YOUR_PLUGINS_HERE)

// 初始化Markdown解析器
// const mdParser = new MarkdownIt()
// 此次用的是ReactMarkdown

const mapStateToProps = (state, ownprops) => {
  return {
    value: state.getIn(['blog', 'value'])
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    breadJudge(payload) {
      dispatch({ type: BREADJUDGE, payload })
    },
    blogChangeAction(payload) {
      dispatch({ type: BLOGCHANGE, payload })
    },
    getValue: (payload) => {
      dispatch({ type: BLOGVALUECHANGE, payload })
    }
  }
}
@connect(mapStateToProps, mapDispatchToProps)
@JudgeLogin
class Create extends Component {
  constructor(props) {
    super(props)
    this.state = {
      html: '',
      text: ''
    }
    // console.log(props)
  }
  componentDidMount() {
    // console.log(this.props)
    this.props.breadJudge(false)
  }
  componentWillUnmount() {
    this.props.breadJudge(true)//显示面包屑
    this.props.getValue('')//清空value
  }
  handleEditorChange = ({ html, text }) => {
    this.props.blogChangeAction({ html, text })
  }

  render() {
    return (
      <MdEditor
        style={{ height: '65vh' }}
        value={this.props.value}
        renderHTML={(text) => {
          // 是要美好Markdown-it
          // return mdParser.render(text)
          // 使用react-markdown
          return React.createElement(ReactMarkdown, {
            source: text
          })
        }}
        onChange={this.handleEditorChange}
      >
      </MdEditor>
    )
  }
}

export default Create
